<template>
   <div>
        <div :ref="componentRef" :style="{height:height+'px'}"></div>
   </div>
</template>
<script>

import * as echarts from 'echarts'

export default {
    name:'ExtLineChar',
    components:{},
    props:{
        componentRef:[String,Number],
        height:{
            type:Number,
            default:200
        },
        option:{
            type:Object,
            default:()=>{}
        },
        xAxisData:String,
        series:[String,Array,Object],
        pageObject:[Object]
       
    },
   
    data(){
        return{
            char:null,
            legendData:[],
            localOptions:{}
        }
    },
    computed:{
       
    },

    created(){
        this.localOptions = this.option
        //将char页面对象给调用的页面，调用的页面就可以操作char页面对象中的方法
        this.pageObject["char"+this.componentRef] = this
    },
    mounted () {
        this.$nextTick(() => {
            if(!this.char){
                this.char = echarts.init(this.$refs[this.componentRef])
            }
            this.setOption()
        })
    },
    methods:{
        getXAxisData(){
            if(this.xAxisData){
                return this.pageObject[this.xAxisData]
            }
            return ['刻度1','刻度2','刻度3','刻度4','刻度5','刻度6']
        },
        getSeries(){
            if(this.series!=undefined && this.series && this.pageObject[this.series]){
                for (let item of this.pageObject[this.series]) {
                    if(item.name){
                        this.legendData.push(item.name)
                    }
                }
                return this.pageObject[this.series]
            }
            
            return []
        },
        setOption(){
            let option = {
                title:{
                    show:this.localOptions.title.show,
                    text:this.localOptions.title.text,
                    textStyle:{
                        color:this.localOptions.title.textStyle.color,
                        fontStyle:this.localOptions.title.textStyle.fontStyle,
                        fontWeight:this.localOptions.title.textStyle.fontWeight,
                        fontSize:this.localOptions.title.textStyle.fontSize
                    }
                },
                legend:{
                    show:this.localOptions.legend.show,
                    left:this.localOptions.legend.left+"%",
                    top:this.localOptions.legend.top+"%",
                    right:this.localOptions.legend.right+"%",
                    bottom:this.localOptions.legend.bottom+"%",
                    data:this.legendData
                },
                tooltip: {
                    show:this.localOptions.tooltip.show,
                    trigger: "axis",
                    axisPointer: {type:this.localOptions.tooltip.axisPointer.type},
                },
                grid: {
                    show:this.localOptions.grid.show,//是否显示网格
                    borderColor:this.localOptions.grid.borderColor,//网格颜色
                    borderWidth:this.localOptions.grid.borderWidth,//网格宽度
                    left: this.localOptions.grid.left+"%",
                    top: this.localOptions.grid.top+"%",
                    right: this.localOptions.grid.right+"%",
                    bottom: this.localOptions.grid.bottom+"%",
                    containLabel:true,//是否防止标签溢出
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {color: this.localOptions.xAxis.axisLine.lineStyle.color}
                    },
                    splitLine: { "show": false},
                    axisTick: {"show": false},
                    splitArea: { "show": false},
                    data: this.getXAxisData(),
                },
                yAxis: [{
                    type: "value",
                    splitLine: {"show": false},
                    axisLine: {lineStyle: {color: this.localOptions.yAxis.axisLine.lineStyle.color}},
                    axisTick: {"show": false},
                    splitArea: {"show": false},

                }],
                series:this.getSeries()
                /*
                series: [
                    {
                        type: 'line',
                        symbol: 'circle',
                        label: {
                            show: this.option.series.label.show,
                            position: 'top',
                            textStyle: {
                                color: this.option.series.label.textStyle.color,
                            }
                        },
                        itemStyle: {
                            color: this.option.series.itemStyle.color,
                            borderColor: this.option.series.itemStyle.borderColor,
                            borderWidth: this.option.series.itemStyle.borderWidth,
                        
                        },
                        data: this.getSeriesData()
                    },
                    {
                        type: 'line',
                        symbol: 'circle',
                        label: {
                            show: this.option.series.label.show,
                            position: 'top',
                            textStyle: {
                                color: this.option.series.label.textStyle.color,
                            }
                        },
                        itemStyle: {
                            color: this.option.series.itemStyle.color,
                            borderColor: this.option.series.itemStyle.borderColor,
                            borderWidth: this.option.series.itemStyle.borderWidth,
                        
                        },
                        data: [20,80,90,60,30,20]
                    }
                ]
                */
            }
            this.char.setOption(option)
        },
        getOption(){
            return this.localOptions
        }
    }
}
</script>